<template>
	<view>
		<view :class="[optionClass(item)]" v-for="(item, index) of answers" v-if="item" :key="index" @click="selectAnswer(item)">
			<image v-if="disabled && rightAnswer == item" class="icon" src="/static/right-a.png"></image>
			<image v-else-if="disabled && select == item && rightAnswer != select" class="icon" src="/static/wrong-a.png"></image>
			<view v-else class="icon">{{options[index]}}.</view>
			<view style="flex: 1;">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"xk-answer",
		props: {
			answers: Array,
			disabled: Boolean,
			rightAnswer: String,
		},
		data() {
			return {
				options: ['A', 'B', 'C', 'D'],
				select: '',
			};
		},
		methods:{
			optionClass(value){
				if(this.disabled){
					if(this.rightAnswer == value){
						// 正确答案
						return 'answer-item right-answer'
					}
					if(this.select == value){
						if(this.select != this.rightAnswer){
							//选择错误
							return 'answer-item wrong-answer'
						}
					}
					return 'answer-item'
				}else{
					if(this.select == value){
						return 'answer-item select'
					}else{
						return 'answer-item'
					}
				}
			},
			selectAnswer(value){
				if(this.disabled){
					return;
				}
				this.select = value;
				this.$emit('change', this.select);
			}
		}
	}
</script>

<style lang="scss">
.answer-item{
	min-height: 100rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 10rpx 30rpx;
	background-color: #FAFBFD;
	border-radius: 10rpx;
	border: 1px solid #F2F3F5;
	.icon{
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.select{
	border: 1px solid #FF4140;
	background-color: rgba($color: #FF4140, $alpha: 0.2);
}
.wrong-answer{
	border: 1px solid #FBECEC;
	background-color: #FBECEC;
}
.right-answer{
	border: 1px solid #EEF8F1;
	background-color: #EEF8F1;
}
</style>
